<template>
    <div class="fillcontainer">
        <div>
            <el-form :inline="true" ref="seachData" :model="seachData">
                <el-form-item label="投标时间筛选:">
                    <el-date-picker v-model="seachData.startTime" type="datetime" placeholder="选择开始时间"></el-date-picker>--
                    <el-date-picker v-model="seachData.endTime" type="datetime" placeholder="选择结束时间"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" icon="search" @click="onScreeoutMoney()">筛选</el-button>
                </el-form-item>
                <el-form-item class="btnRight" v-if="user.identity =='manager'">
                    <el-button type="primary" size="smail" icon="view" @click="handleAdd()">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--data-->
        <div class="tablecontainer">
            <el-table
            v-if="tableData.length>0"
            :data="tableData"
            max-height="800"
            border
            style="width: 100%">

            <el-table-column align="center" label="序号" width="70" type="index">
            
            </el-table-column>
            <el-table-column align="center" label="创建时间" width="250" prop="date">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
            </el-table-column>

            <el-table-column align="center" label="收支类型" width="150" prop="type">
            
            </el-table-column>

            <el-table-column align="center" label="收支描述" width="150" prop="description">
            
            </el-table-column>

            <el-table-column align="center" label="收入" width="100" prop="income">
            <template slot-scope="scope">
                <span style="color:#00d053">{{ scope.row.income }}</span>
            </template>
            </el-table-column>

            <el-table-column align="center" label="支出" width="100" prop="expend">
            <template slot-scope="scope">
                <span style="color:#f56767">{{ scope.row.expend }}</span>
            </template>
            </el-table-column>

            <el-table-column align="center" label="账户现金" width="100" prop="cash">
            <template slot-scope="scope">
                <span style="color:#4db3ff">{{ scope.row.cash }}</span>
            </template>
            </el-table-column>

            <el-table-column align="center" label="备注" width="180" prop="remark">
            
            </el-table-column>

            <el-table-column prop="operation" align="center" label="操作" fixed="right" width="150" v-if="user.identity =='manager'">
                <template slot-scope="scope">
                    <el-button
                    type="warning"
                    icon="edit"
                    size="small"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button>
                    <el-button
                    type="danger"
                    icon="delete"
                    size="small"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <el-row>
                <el-col :span="24">
                    <el-pagination class="pagination"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="paginations.pageindex"
                        :page-sizes="paginations.pagesizes"
                        :page-size="paginations.pagesize"
                        :layout="paginations.layout"
                        :total="paginations.total">
                    </el-pagination>
                </el-col>
            </el-row>
            <!--分页-->

        </div>
        <!--插入Dialog-->
        <DialogFund :dialog="dialog" @autoUpdate="getProfile" :form="form"></DialogFund>
    </div>
</template>

<script>
import DialogFund from "./dialogfund";
export default {
    data() {
        return {
            //分页对象
            paginations:{
                pageindex:1,//当前显示页
                pagesizes:[2,5,8,10],//可配置每页显示多少条
                pagesize:10,//默认当前页显示条数
                layout:'total,sizes,prev,pager,next,jumper',//翻页属性
                total:0//总数据量
            },
            tableData:[],
            allData:[],
            filterData:[],
            form:{
                id:'',
                type:'',
                description:'',
                income:'',
                expend:'',
                cash:'',
                remark:''
            },
            dialog:{
                show:false,
                title:'',
                option:''
            },
            seachData:{
                startTime:'',endTime:''
            }
        }
    },
    computed: {
        user(){
            return this.$store.getters.user;
        }
    },
    components:{
        DialogFund
    },
    created() {
        this.getProfile();
    },
    methods: {
        getProfile(){
            this.$axios.get('/api/profiles').then(res=>{
            this.allData=res.data;
            this.filterData=res.data;
            //设置分页属性
            this.setPage();
            }).catch(err =>console.log(err))
        },
        setPage(){
            this.paginations.total=this.allData.length;
            this.paginations.pageindex=1;
            this.paginations.pagesize=5;//设置每页显示条数

            this.tableData = this.allData.filter((item, index) => {
            return index < this.paginations.pagesize;
            });
        },
        handleAdd() {
            this.dialog.show=true;
            this.dialog.title='添加资金信息'

            this.form.id='';
            this.form.type='';
            this.form.description='';
            this.form.income='';
            this.form.expend='';
            this.form.cash='';
            this.form.remark='';

             this.dialog.option='add'
        },
        handleEdit(index, row) {
            this.dialog.show=true;
            this.dialog.title='修改资金信息';
            
            this.form.id=row._id;
            this.form.type=row.type;
            this.form.description=row.description;
            this.form.income=row.income;
            this.form.expend=row.expend;
            this.form.cash=row.cash;
            this.form.remark=row.remark;

            this.dialog.option='edit';
        },
        handleDelete(index, row) {
            this.$axios.delete(`/api/profiles/delete/${row._id}`)
            .then(res => {
                this.$message("删除成功");
                this.getProfile();
            })
        },
        //设置每页显示多少条
        handleSizeChange(pagesize){
            this.paginations.pageindex=1;
            this.paginations.pagesize=pagesize;//设置每页显示条数
            this.tableData = this.allData.filter((item, index) => {
            return index < pagesize;
            });
        },
        // 选择页数操作
        handleCurrentChange(page){
            // 记录当前显示数据的下标起始位置
            let startindex = this.paginations.pagesize * (page - 1);
            // 定义一个临时表，存储要显示当前页的数据
            let table = this.allData.filter((item, index) => {
                return index >= startindex;
            });
            // 将筛选出来的数据填充到原来的table中
            this.tableData = table.filter((item, index) => {
                return index < this.paginations.pagesize;
            });
            
        },
        onScreeoutMoney(){
            if(!this.seachData.startTime||!this.seachData.endTime){
                this.$message({
                    type:'warinng',
                    message:'请选择时间'
                });
                this.getProfile();
                return;
            }

            const stime = this.seachData.startTime.getTime();
            const etime = this.seachData.endTime.getTime();
            this.allData = this.filterData.filter(item => {
                let date = new Date(item.date);
                let time = date.getTime();
                return time >= stime && time <= etime;
            });
            // 分页数据
            this.setPage();
        }
    }
}
</script>

<style scoped>
.fillcontainer {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.btnRight {
  float: right;
}
.pagination {
  text-align: right;
  margin-top: 10px;
}
</style>